import PageService from '../api/page';

// 把 components 转换为页面 JSON 模板
function transformComponentsToTemplate(components, containerWidth, containerHeight) {
    return {
        page: {
            id: "home", // 页面唯一ID
            title: "首页模板",
            layout: {
                grid: {
                    columns: 12,
                    gap: 10
                }
            },
            components: components.map(comp => {
                // 计算百分比
                const xPercent = ((comp.x / containerWidth) * 100).toFixed(4);
                const yPercent = ((comp.y / containerHeight) * 100).toFixed(4);
                const widthPercent = ((comp.width / containerWidth) * 100).toFixed(4);
                const heightPercent = ((comp.height / containerHeight) * 100).toFixed(4);

                return {
                    id: String(comp.id),
                    title: comp.title,
                    type: comp.type,
                    layout: {
                        x: parseFloat(xPercent),
                        y: parseFloat(yPercent),
                        width: parseFloat(widthPercent),
                        height: parseFloat(heightPercent)
                    }
                }
            })
        }
    }
}

/**
 * 将 schema 中的百分比布局转换为像素布局
 * @param {Array} components - schema 中的 components 数组（百分比）
 * @param {Number} containerWidth - 容器宽度
 * @param {Number} containerHeight - 容器高度
 * @returns {Array} - 像素布局的 components
 */
export function parseTemplateToComponents(components, gridContainer) {
    console.log(gridContainer)
    if (!gridContainer.value) {
        console.error("容器不存在，无法保存布局");
        return;
    }
    const containerWidth = gridContainer.value.clientWidth;
    const containerHeight = gridContainer.value.clientHeight;
    console.log(components, containerWidth, containerHeight)
    return components.map(comp => {
        const layout = comp.layout || comp; // 兼容 layout 嵌套或平铺的情况

        // 百分比转 px
        const x = (layout.x / 100) * containerWidth;
        const y = (layout.y / 100) * containerHeight;
        const width = (layout.width / 100) * containerWidth;
        const height = (layout.height / 100) * containerHeight;

        return {
            id: comp.id,
            title: comp.title,
            type: comp.type,
            x,
            y,
            width,
            height,
            layout: {
                x,
                y,
                width,
                height
            }
        };
    });
}

// 根据该方法生成一个返回components的方法，需要把百分比计算成px
export async function savePageJson(components, gridContainer) {
    console.log(gridContainer)
    if (!gridContainer) {
        console.error("容器不存在，无法保存布局");
        return;
    }
    const containerWidth = gridContainer.clientWidth;
    const containerHeight = gridContainer.clientHeight;
    const pageJson = transformComponentsToTemplate(components, containerWidth, containerHeight);
    const pageDto = {
        "schemaJson" : JSON.stringify(pageJson),
        "description" : "ces",
        "pageKey" : "http://localhost:8081/render/",
        "title" : "首页"
    }
    console.log(JSON.stringify(pageDto))

   // PageService.createPage(pageDto);
}
